<template>
  <div class="word-tags-category-wrapper content-main">
    <div class="flex-wrap">
      <span class="add-new-label" @click="showAddModel = true">新增标签/分类</span>
      <span class="add-new-label" @click="handleToggleType">切换为{{showLabels|filterType}}</span>
      <el-input v-model="search" @change="handleSearchLabel" size="mini" placeholder="输入关键字搜索" />
    </div>
    <div v-if="!tagsList.length" class="content-null">- 暂无标签分类 -</div>
    <div v-else class="word-tags-list reset-list label: showLabels">
      <el-tag
        v-for="(item, index) in tagsList"
        :class="{label: item.type === 'label'}"
        disable-transitions
        effect="plain"
        :key="index"
        closable
        @close="handleRemoveTag(item, index)"
      >{{item.name}}</el-tag>
    </div>

    <el-pagination
      background
      :total="totalTags"
      :class="['flex-center']"
      layout="prev, pager, next"
      @current-change="getAllWordTags"
    ></el-pagination>

    <div class="add-tags-model" v-if="showAddModel" @click="handleCancelModel">
      <div class="pos-center model-content" @click.stop>
        <h3>新增标签/分类</h3>
        <el-input class="margin--bottom" v-model="labelForm.name" placeholder="请输入标签/分类名称"></el-input>
        <el-select class="margin--bottom" v-model="labelForm.type" placeholder="请选择标签/分类类型">
          <el-option label="标签" value="label" />
          <el-option label="分类" value="category" />
        </el-select>
        <div class="flex-center margin--top">
          <el-button class="theme-bd" @click="handleCancelModel">取消</el-button>
          <el-button class="theme-bg" :loading="addBtnLoading" @click="handleSubmitModel">新增</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from '~/interface/Word';
export default {
  props: {
    loginUser: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      search: '',
      totalTags: 0,
      tagsList: [],
      labelForm: {
        name: '',
        type: ''
      },
      addBtnLoading: false,
      searchResults: [], // 搜索结果
      showAddModel: false, // 显示添加分类、标签
      showLabels: true // 决定当前显示的是标签还是分类
    }
  },

  filters: {
    filterType(value) {
      return !value ? '标签' : '分类'
    }
  },

  watch: {
    search(newVal, oldVal) {
      if (!newVal.length) {
        this.getAllWordTags();
      }
    }
  },

  created() {
    this.getAllWordTags();
  },

  methods: {
    // 获取标签、分类列表
    getAllWordTags(page) {
      let type = this.showLabels ? 'label' : 'category';
      API.getWordTags({ page, type, order: 'ASC' }).then(res => {
        const data = res.list;
        this.totalTags = res.meta.total;
        this.tagsList = data.map(item => {
          item.alias = item.type === 'label' ? '标签' : '分类';
          return item;
        });
      });
    },
    // 关闭添加标签、分类模态框
    handleCancelModel() {
      this.showAddModel = false;
    },
    // 添加标签、分类
    handleSubmitModel() {
      const { name, type } = this.labelForm;
      // 当前显示的类型
      const curType = this.showLabels ? 'label' : 'category';
      if (!name.trim().length) {
        this.$message.error('请输入分类、标签名字!');
      } else if (!type.trim().length) {
        this.$message.error('请选择分类、标签类别!');
      } else {
        this.addBtnLoading = true;
        API.postCreateTag({ name, type }).then(res => {
          this.$message({
            type: 'success',
            message: `${type === 'label' ? '标签' : '分类'}创建成功~`
          });

          // 如果添加的类型和当前新增的类型是一致时
          if (type === curType) {
            this.tagsList.push({
              name,
              type,
              id: res.id
            });
          }
          this.labelForm.name = this.labelForm.type = '';
          this.showAddModel = false;
          this.this.addBtnLoading = false;
        });
      }
    },
    handleToggleType() {

      this.showLabels = !this.showLabels;
      this.getAllWordTags(1);
    },
    // 删除标签、分类
    handleRemoveTag(tag, index) {
      API.deleteWordTag(tag.id).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.tagsList.splice(index, 1);
      });
    },
    // 搜索标签、分类
    handleSearchLabel(keyword) {
      if (keyword.trim().length) {
        API.getWordTags({ keyword, order: 'ASC' }).then(res => {
          this.tagsList = res.list;
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.word-tags-category-wrapper {
  padding-bottom: 0;

  .flex-wrap {
    .add-new-label {
      margin-right: 10px;
      padding: 4px 10px;
      border: 1px solid var(--border);
      color: var(--theme);
      user-select: none;
      cursor: pointer;
    }

    & /deep/ .el-input,
    & /deep/ .el-input__inner {
      width: 308px;
      height: 30px;
    }
  }

  .el-tag {
    margin: 10px 10px 0 0;
    border-color: currentColor;
    color: var(--theme);
    transition: color 0.2s, border-color 0.2s, width 0.2s;

    /deep/ .el-tag__close {
      color: #ff5656;
    }
  }

  .label.el-tag {
    color: #67c23a;
  }

  .word-tags-list {
    height: 490px;
  }

  .add-tags-model {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000, $alpha: 0.5);

    .model-content {
      width: 280px;
      padding: 20px;
      background-color: #fff;

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>